<template>
  <div class="order-details-page">
    <h3 class="big_tle">订单详情</h3>

    <div class="detial_box">
      <p class="tle">商家信息 ></p>
      <cell title="商家名" :value="orderDetail.shop_name"></cell>
      <cell title="商家电话" :value="orderDetail.shop_phone"></cell>
    </div>

    <div class="detial_box">
      <p class="tle">个人信息 ></p>
      <cell title="订单状态" :value="orderState"></cell>
      <cell title="收货人" :value="orderDetail.userName"></cell>
      <cell title="手机" :value="orderDetail.userPhone"></cell>
      <cell title="地址" :value="orderDetail.userAddress"></cell>
    </div>
    <div class="detial_box">
      <p class="tle">订单商品 ></p>
      <div class="goods_item" v-for="item in orderDetail.order_goods">
        <flexbox :gutter="0" wrap="wrap">
          <flexbox-item :span="1/5" class="good_img">
            <img :src="item.Icon" alt="" style="width:100%">
          </flexbox-item>
          <flexbox-item :span="4/5" class="good_cont">
            <p class="name">{{ item.good_name }}</p>
            <p class="price">{{ item.price | price_func}}</p>
          </flexbox-item>
          <span class="good_num">x{{ item.count }}</span>
        </flexbox>
      </div>
    </div>
  </div>
</template>
<script>
import g from "../../common/js/http.js"
import { Cell, Group, CheckIcon, Flexbox, FlexboxItem } from "vux"
import { setTimeout } from "timers"
export default {
  data() {
    return {
      orderDetail: "",
      orderState: ""
    }
  },
  components: {
    Cell,
    Group,
    CheckIcon,
    Flexbox,
    FlexboxItem
  },
  watch: {
    $route(to, from) {
      this.getData(this.$store.state.orderNo)
    }
  },
  created () {
    this.getData(this.$store.state.orderNo)
  },
  filters: {
    price_func(val) {
      return "￥" + val.toFixed(2)
    }
  },
  methods: {
    changeOrderState() {
      var _this = this
      var orderDetail = this.orderDetail.orderStatus
      if (orderDetail == "0") {
        _this.orderState = "待支付"
      } else if (orderDetail == "1") {
        _this.orderState = "待发货"
      } else if (orderDetail == "2") {
        _this.orderState = "待收货"
      } else if (orderDetail == "3") {
        _this.orderState = "待评价"
      } else if (orderDetail == "4") {
        _this.orderState = "退款"
      }
    },
    getData(orderNo) {
      var _this = this
      g.post_func("/api/v1/staff/order_details", { orderNo: orderNo }, function(
        data
      ) {
        if (data.code == "200") {
          _this.orderDetail = data.data
          console.log(_this.orderDetail)
          _this.changeOrderState()
        } else if (data.code == "401") {
          alert("登录过期 请重新登录")
          _this.$router.push("/login")
        } else {
          alert("网络繁忙")
        }
      })
    }
  }
}
</script>
<style scoped>

.detial_box {
  font-size: 96% !important;
  width: 90%;
  margin: 10px auto;
  background: #f3f3f3;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 3px 3px 3px #f1f1f1;
}
.order-details-page .tle {
  padding: 10px 15px;
  font-weight: 600;
}
.big_tle {
  text-align: center;
  font-size: 16px;
  margin: 15px;
}
.goods_item {
  position: relative;
  margin: 10px 0;
}
.good_img {
  overflow: hidden;
  height: 62px;
}
.good_img * {
  padding-left: 10px;
}
.good_cont * {
  padding-left: 20px;
  margin: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.good_cont .name {
  color: #3f3f3f;
}
.good_cont .desc {
  color: #808080;
  font-size: 92%;
}
.good_cont .price {
  color: #f80e17;
}
.good_num {
  position: absolute;
  bottom: 8px;
  right: 18px;
  color: #474747;
}
</style>
